<template>
  <Popup ref="attendance" type="center" @close="close">
    <view class="attendance-dialog">
      <text class="iconfont icon-close" @click="close" />
      <view class="attendance-dialog__title" />
      <view class="attendance-dialog__content">
        <view class="attendance-dialog__status">
          <transition name="fade" :duration="3000">
            <template v-if="!done">
              <text v-if="isToday" @click="handleSign">
                立即
                <br />签到
              </text>
              <text v-else class="iconfont icon-close" />
            </template>
            <text v-else class="iconfont icon-rightline" />
          </transition>
        </view>
        <view class="attendance-dialog__date">
          <view class="attendance-dialog__date-text">
            <text
              class="iconfont icon-arrow-left"
              @click="handlePreOrNext('pre')"
            />
            <text class="attendance-dialog__date-text-main">
              {{ displayDate }}
            </text>
            <text
              class="iconfont icon-arrow-right"
              @click="handlePreOrNext('next')"
            />
          </view>
          <view class="attendance-dialog__date-desc">
            连续签到7天，领取3天体验会员
          </view>
        </view>
        <view class="attendance-dialog__num">
          第
          <text class="attendance-dialog__num-text">
            {{ keepTimes }}
          </text>
          天
        </view>
        <view class="attendance-dialog__progress">
          <view
            v-for="item in [1, 2, 3, 4, 5, 6, 7]"
            :key="item"
            class="attendance-dialog__progress-item"
          >
            <view
              :class="{
                'attendance-dialog__progress-img': true,
                unsign: keepTimes < item,
              }"
            />
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
    </view>
  </Popup>
</template>

<script>
import Popup from '../Popup';
import dayjs from 'dayjs';
import { continueDays } from '@/utils/index';

export default {
  components: {
    Popup,
  },

  props: {
    show: { type: Boolean, default: false },
  },

  data() {
    return {
      keepTimes: 0,
      records: [],
      now: dayjs().format('YYYY/MM/DD'),
    };
  },

  computed: {
    done() {
      return this.records.indexOf(this.now) > -1;
    },

    displayDate() {
      return dayjs(this.now).format('YYYY年MM月DD日');
    },

    isToday() {
      return this.now === dayjs().format('YYYY/MM/DD');
    },
  },

  watch: {
    show(newValue) {
      if (newValue) {
        this.fetchAttendance().then(() => {
          this.$refs.attendance && this.$refs.attendance.open();
        });
      } else {
        this.$refs.attendance && this.$refs.attendance.close();
      }
    },
  },

  methods: {
    close() {
      this.$emit('update:show', false);
    },

    fetchAttendance() {
      return this.$http({
        method: 'GET',
        url: '/api/front/attendance/me',
        needAuth: true,
        skipToast: false,
        errorText: '获取签到记录失败',
      }).then((res) => {
        if (res.ok) {
          this.keepTimes = res.data.keepTimes;
          this.records = res.data.records;
        }
      });
    },

    handlePreOrNext(preOrNext) {
      if (preOrNext === 'pre') {
        this.now = dayjs(this.now).add(-1, 'day').format('YYYY/MM/DD');
      } else {
        const date = dayjs(this.now).add(1, 'day').format('YYYY/MM/DD');
        if (dayjs(date).isAfter(dayjs())) {
          uni.showToast({ title: '请明天再来~', icon: 'none', duration: 2000 });
          return;
        }
        this.now = date;
      }

      this.keepTimes = continueDays(
        this.records.filter((date) => !dayjs(this.now).isBefore(dayjs(date)))
      );
    },

    handleSign() {
      this.$http({
        method: 'GET',
        url: '/api/front/attendance/sign',
        needAuth: true,
        skipToast: false,
        errorText: '签到失败',
      }).then((res) => {
        if (res.ok) {
          this.keepTimes = res.data.keepTimes;
          this.records = res.data.records;
          if (res.data.isThreeDay) {
            this.$store.commit('showSuccessTips', '恭喜获得3天体验会员');
          } else {
            this.$store.commit('showSuccessTips', '签到成功');
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.attendance-dialog {
  position: relative;
  width: 640rpx;
  height: auto;
  min-height: 300rpx;
  background: linear-gradient(135deg, #438ff9, #435bd3);
  border-radius: 20rpx;
  padding: 20rpx;

  & > .icon-close {
    position: absolute;
    right: 12rpx;
    top: 12rpx;
    font-size: 48rpx;
    color: #fff;
    padding: 4rpx;
  }

  &__title {
    width: 407rpx;
    height: 60rpx;
    background: url('./images/text.png');
    background-size: 100% 100%;
    margin: 28rpx auto 26rpx auto;
  }

  &__content {
    position: relative;
    width: 100%;
    height: 635rpx;
    background: url('./images/dialog-bg.png');
    background-size: 100% 100%;
  }

  &__status {
    position: absolute;
    width: 167rpx;
    height: 167rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    color: #f3ffff;
    text-shadow: 0px 2rpx 6rpx #999;

    .iconfont {
      font-size: 48rpx;
      font-weight: bold;
    }
  }

  &__date {
    position: relative;
    top: 200rpx;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    &-text {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      color: #4d64dd;
      font-size: 26rpx;

      &-main {
        margin-left: 90rpx;
        margin-right: 90rpx;
      }

      & > .iconfont {
        display: inline-block;
        width: 36rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        background: #dfdfdf;
        color: #fff;
        border-radius: 4rpx;

        &:active {
          background: #ccc;
        }
      }
    }

    &-desc {
      display: inline-block;
      width: auto;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 22rpx;
      background: #7f7fff;
      color: #fff;
      font-size: 24rpx;
      padding: 0 16rpx;
      margin-top: 24rpx;
    }
  }

  &__num {
    position: relative;
    top: 280rpx;
    width: 240rpx;
    height: 64rpx;
    line-height: 64rpx;
    border-radius: 32rpx;
    background: #f2f2f2;
    color: #4d64dd;
    text-align: center;
    margin: 0 auto;
    font-size: 32rpx;

    &-text {
      font-size: 48rpx;
      font-weight: bold;
      padding: 0 4rpx;
    }
  }

  &__progress {
    position: absolute;
    width: 86%;
    left: 7%;
    bottom: 40rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    color: #4374f5;
    font-size: 30rpx;

    &::before {
      position: absolute;
      top: 8rpx;
      content: ' ';
      width: 100%;
      height: 14rpx;
      background: #4374f5;
      border-radius: 7rpx;
    }

    &-item {
      margin-right: 36rpx;

      &:last-child {
        margin-right: 0;

        .attendance-dialog__progress-img {
          background: url('./images/seven-days-award.png') no-repeat;
          background-size: 100% auto;
          background-position: center center;
        }
      }
    }

    &-img {
      position: relative;
      z-index: 1;
      width: 28rpx;
      height: 28rpx;
      margin-bottom: 18rpx;
      background: url('./images/sign.png') no-repeat;
      background-size: 100% auto;
      background-position: center center;

      &.unsign {
        background: url('./images/unsign.png') no-repeat;
        background-size: 100% auto;
        background-position: center center;
      }
    }
  }
}
</style>
